<template>
  <div class="help-container">
    <Header />

    <!-- 顶部导航区域 -->
    <section class="product-header">
      <div class="container">
        <div class="detail">
        </div>
      </div>
    </section>

    <!-- 帮助中心内容区域 -->
    <section class="help-content">
      <div class="container mx-auto px-4">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800 mb-6">常见问题</h2>

        <div class="faq-container max-w-4xl mx-auto">
          <el-collapse v-model="activeNames" accordion class="faq-collapse">
            <el-collapse-item
                v-for="(item, index) in faqList"
                :name="index.toString()"
                :key="index"
                class="faq-item mb-3 rounded-lg overflow-hidden shadow-sm"
            >
              <template #title>
                <div class="flex items-center justify-between py-4 px-6">
                  <span class="text-lg font-medium text-gray-800">{{ item.question }}</span>
                  <el-icon :class="{ 'rotate-90': activeNames === index.toString() }"><arrow-right /></el-icon>
                </div>
              </template>
              <div class="faq-answer p-6 bg-white border-t border-gray-100">
                <p class="text-gray-600 leading-relaxed">{{ item.answer }}</p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </section>

    <Footer />

    <!-- 联系客服按钮 -->
    <div class="contact-customer-service">
      <button class="contact-btn" @click="toggleServiceCard">
        <i class="fa fa-comments"></i>
        <span>联系客服</span>
      </button>

      <!-- 客服悬浮卡片 -->
      <div class="service-card" :style="{ display: showContactCard ? 'block' : 'none' }">
        <div class="card-header">
          <h3>在线客服</h3>
          <button class="close-btn" @click="closeServiceCard">&times;</button>
        </div>
        <div class="card-content">
          <p>工作时间: 9:00-18:00，不在工作时间内可以发送邮件到1871794553@qq.com哦，亲~~</p>
          <div class="contact-methods">
            <a href="tel:19511988246" class="contact-item">
              <i class="fa fa-phone"></i>
              <span>电话咨询</span>
            </a>
            <a href="https://mail.qq.com/" class="contact-item">
              <i class="fa fa-envelope"></i>
              <span>邮件咨询</span>
            </a>
            <a href="#" class="contact-item" @click="openChatWindow">
              <i class="fa fa-comments"></i>
              <span>在线聊天</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 聊天窗口 -->
  <ChatWindow v-model:show="showChatWindow" />

</template>

<script setup lang="ts">
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref } from 'vue'
import { ElCollapse, ElCollapseItem, ElIcon } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import ChatWindow from '@/components/ChatWindow.vue';

const showChatWindow = ref(false);
// 常见问题
const faqList = ref([
  {
    question: '如何修改账户密码？',
    answer: '登录后进入"个人中心"，点击"账户设置"，选择"修改密码"即可完成操作。'
  },
  {
    question: '订单多久能发货？',
    answer: '通常情况下，订单会在24小时内发货，偏远地区可能延迟1-2天。'
  },
  {
    question: '如何申请退换货？',
    answer: '在"我的订单"中找到需要退换货的商品，点击"申请退换货"按钮，按提示操作即可。'},
  {
    question: '邮件发送地址在哪？',
    answer: '点击联系客服后，点击发送邮件，登陆后选择收件人地址为1871794553@qq.com。'},
  {
    question: '为什么我的商品中心突然数据都没有了？',
    answer: '目前商品中心的商品排名和核心商品的统计都是基于近30天有销售的商品进行的，如果您店铺内所有商品的近30天销量均为0，则可能出现页面板块为空的现象。'}
])

// 初始展开第一个面板
const activeNames = ref('0')

// 控制客服卡片显示/隐藏
const showContactCard = ref(false)

// 显示/隐藏客服卡片
const toggleServiceCard = () => {
  showContactCard.value = !showContactCard.value
}

// 关闭客服卡片
const closeServiceCard = () => {
  showContactCard.value = false
}
// 打开聊天窗口
const openChatWindow = () => {
  showContactCard.value = false;
  showChatWindow.value = true;
};

</script>

<style scoped>
/* 联系客服按钮样式 */
.contact-customer-service {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}

.contact-btn {
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.contact-btn i {
  font-size: 18px;
}

/* 客服卡片样式 */
.service-card {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 280px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  display: none;
  transform-origin: bottom right;
  animation: fadeIn 0.3s ease forwards;
  z-index: 1001;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card-header {
  padding: 12px 16px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #333;
}

.card-content {
  padding: 16px;
}

.card-content p {
  margin: 0 0 12px;
  color: #666;
  font-size: 14px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s;
}

.contact-item:hover {
  background-color: #e8e8e8;
}

.contact-item i {
  width: 20px;
  text-align: center;
  color: #ff4444;
}

.help-container {
  min-height: 100vh;
  background-color: #f8fafc;
}

.product-header {
  padding: 24px 720px;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.help-content {
  padding: 48px 0;
}

.faq-container {
  width: 100%;
}

.faq-item {
  transition: all 0.3s ease;
}

.faq-answer {
  padding: 16px 0 0;
  color: #666;
  line-height: 1.6;
}
/* 聊天窗口模态框样式 */
.chat-modal {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #333;
}
</style>